<template>
  <Card>

    <div class="flexCSB">
      <DatePicker
        :clearable="clearable"
        format="yyyy-MM-dd"
        type="daterange"
        placeholder="请选择起止时间"
        style="width: 400px"
        :value="time"
        :options="options"
        @on-change="onChange"
      ></DatePicker>
      <el-select v-model="typeRule" @change="changeType" filterable placeholder="请选择积分类型">
        <el-option
          v-for="item in typeRuleList"
          :key="item.id"
          :label="item.name"
          :value="item.id">
        </el-option>
      </el-select>
    </div>

    <Table class="table" :loading="loading1" highlight-row :columns="columns" :data="data"></Table>
    
    <Page
	show-total
      class="page"
      :total="total"
      :current.sync="current"
      show-elevator
      @on-change="changePage"
    />
    
  </Card>
</template>

<script>
	export default {
    	data() {
      		return {
      			options: {
			        disabledDate(date) {
			          return date && date.valueOf() > Date.now()
			        },
			        shortcuts: [
			          {
			            text: "近7天",
			            value() {
			              const end = new Date();
			              const start = new Date();
			              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
			              return [start, end];
			            }
			          },
			          {
			            text: "近30天",
			            value() {
			              const end = new Date();
			              const start = new Date();
			              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
			              return [start, end];
			            }
			          },
			          {
			            text: "近90天",
			            value() {
			              const end = new Date();
			              const start = new Date();
			              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
			              return [start, end];
			            }
			          },
			          {
			            text: "近180天",
			            value() {
			              const end = new Date();
			              const start = new Date();
			              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 180);
			              return [start, end];
			            }
			          },
			          {
			            text: "近360天",
			            value() {
			              const end = new Date();
			              const start = new Date();
			              end.setTime(end.getTime() - 3600 * 1000 * 24 * 1);
			              start.setTime(start.getTime() - 3600 * 1000 * 24 * 360);
			              return [start, end];
			            }
			          }
			        ]
			      },
			      // 4afd5343-3164-4af6-9ff5-eec4a423ae1f
      			loading1: false,
      			columns: [
      				{ title: "openid", key: "openid", align: "center"},
      				{ title: "分数", key: "score", align: "center"},
      				{ title: "类型", key: "ruleName", align: "center"},
      				{ title: "时间", key: "gmtCreate", align: "center"},
      			],
      			data: [],
      			total: 0,
      			current: 1,
      			time: [],
      			clearable: false,
      			typeRuleList: [
      				{
      					name: '全部',
      					id: -1,
      				},
      				{
      					name: '回复留言/留言',
      					id: 1,
      				},
      				{
      					name: '分享个人',
      					id: 3,
      				},
      				{
      					name: '分享群里',
      					id: 4,
      				},
      				{
      					name: '邀请博物馆注册',
      					id: 5,
      				},
      				{
      					name: '点赞',
      					id: 6,
      				},
      				{
      					name: '预约成功',
      					id: 7,
      				},
      				{
      					name: '核销成功',
      					id: 8,
      				},
      				{
      					name: '登录',
      					id: 9,
      				}
      			],
      			typeRule: -1,





      		}
      	},
      	created(){
      		this.getPointRecords()
      	},
      	methods:{
      		changeType(){
      			this.getPointRecords()
      		},
      		onChange(data){
      			this.time = data
      			this.getPointRecords()
      		},
      		changePage(e) {
		      	this.current = e;
		      	this.getPointRecords();
		    	},
      		getPointRecords(){
      			this.loading1 = true;
				    this.$http("/stage/pointRecord/getPointRecords", {
				    	current: this.current,
				    	size: 10,
				    	end: this.time[1] == undefined ? '' : this.time[1],
				    	start: this.time[0] == undefined ? '' : this.time[0],
				    	typeRule: this.typeRule == -1 ? '' : this.typeRule
				    }, "post", res => {
			        if (res.data.code == 200) {
			         	this.data = res.data.data.records
			         	this.total = res.data.data.total
			        } else {
		          	this.$Message.error(res.data.msg);
			        }
			        this.loading1 = false
				    })
      		},


      	},

  	}
</script>

<style scoped>
	
</style>